<template>
    <div class="vis">
        <h2>is</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            动态切换组件。和component内置组件一起完成该功能。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">使用方法</el-tag>
        <p class="decr">
            1. 带is属性的标签固定写法：<br>
            {{comp}}<br>
            其中，component是vue的内置组件。<br>
            2. is属性对应的aaa值对应的是哪个组件名，就展示哪个组件。<br>
            <br>
            比如下面demo中，aaa值是istab1，就会在component标签位置展示istab1组件。<br>
            如果aaa的值是istab2，那就会在component标签位置展示istab2组件。<br>
            ...
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            点击tab按钮，切换下方内容展示。
        </p>
        <div class="is-wrap">
            <ul class="is-ul">
                <li 
                    v-for="tab in tabs" 
                    :key="tab"
                    :class="{active: currentTab === tab}"
                    @click="currentTab = tab"
                    >
                    {{tab}}
                </li>
            </ul>
            <div class="is-cont">
                <component :is="currentTabComponent" class="tab-cont"></component>
            </div>
        </div>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import istab1 from './is-tab1';
import istab2 from './is-tab2';
import istab3 from './is-tab3';

export default {
    name: 'Vis',
    mixins: [mixinPage],
    components: {istab1, istab2, istab3},
    data() {
        return {
            tabs: ['tab1', 'tab2', 'tab3'],
            currentTab: 'tab1',
            comp: `<component :is="aaa" class="aclass"></component>`,
        }
    },
    computed: {
        currentTabComponent() {
            return "is" + this.currentTab;
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';

.is-wrap {
    width: 100%;
    background-color: rgb(238, 238, 238);
    margin-top: 10px;

    .is-ul {
        list-style: none;
        width: 300px;
        height: 40px;
        display: flex;
        justify-content: space-around;

        li {
            width: 80px;
            height: 100%;
            text-align: center;
            line-height: 40px;
            background-color: rgba(64,158,255, .3);
            border-radius: 12px;
            cursor: pointer;

            &.active {
                background-color: rgb(64,158,255);
            }
        }
    }

    .is-cont {
        width: 300px;
        height: 80px;
        margin-top: 10px;
        margin-left: 10px;
        background-color: rgb(64,158,255);
        color: #fff;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 10px;
    }
}
</style>